<template>
  <div>
    <div class="mine-warp">
      <div>
        <div class="photo">
          <img src="~@/assets/images/index/photo.png" class="w-100 h-100">
        </div>
        <div class="userName">{{ info.userName }}</div>
        <div class="userId">{{ info.userId }}</div>
      </div>
    </div>
    <div class="mine-list px-2">
      <div class="list-item d-flex a-center">
        <van-icon name="manager" class="l_icon" color="#3689ff" />
        <van-cell :title="`用户账号：${info.userId}`" :clickable="false" />
      </div>
      <div class="list-item d-flex a-center">
        <van-icon name="coupon" class="l_icon" color="#2aaef3" />
        <van-cell :title="`用户名称：${info.userName}`" :clickable="false" />
      </div>
      <div class="list-item d-flex a-center" is-link>
        <van-icon name="label" class="l_icon" color="#16cfbd" />
        <van-cell :title="`用户类型：${info.userTypeName}`" :clickable="false" />
      </div>
      <div class="list-item d-flex a-center" is-link>
        <van-icon name="cluster" class="l_icon" color="#fda43f" />
        <van-cell :title="`所属部门：${info.department}`" :clickable="false" />
      </div>
      <!-- <div class="list-item d-flex a-center">
        <van-icon name="friends" class="l_icon" color="#11a0ff" />
        <van-cell :title="`用户角色：${info.userName}`" :clickable="false" />
      </div> -->
      <van-button type="primary" round color="#409EFF" @click="handleLogout">退 出</van-button>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { getUserInfo } from '@/api/user'

export default {
  inject: ['layout'],
  data() {
    return {
      show: false,
      name: '',
      UserInfo: JSON.parse(localStorage.getItem('USERInfo')),
      info: {
        userId: '',
        userName: ''
      }
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    shwoInfo(type) {
      this.show = true
      this.name = type
    },
    handleLogout() {
      Dialog.confirm({
        title: '提示',
        message: '确认要退出登录吗？'
      }).then(() => {
        this.$store.dispatch('user/logout').then((res) => {
          this.$router.push({ path: '/login' })
        })
      })
    },
    // 用户信息
    async getUserInfo() {
      this.layout.showAreaLoading(['.mine-warp', '.mine-list'])
      const userId = this.UserInfo.userId
      const { status, data } = await getUserInfo({ userId })
      if (status === 0 && data) {
        this.info = data
      }
      this.layout.hideAreaLoading(['.mine-warp', '.mine-list'])
    },
    goToDeatails(path) {
      this.$router.push({
        path: `/system/${path}`
      })
    }
  }
}
</script>

<style lang="scss">
.mine-warp {
  width: 100%;
  height: 345px;
  background-size: contain;
  position: relative;
  color: #fff;
  h3 {
    font-size: 36px;
    text-align: center;
    font-weight: normal;
  }
  .photo {
    width: 135px;
    height: 135px;
    background: #6fb3e5;
    border-radius: 50%;
    position: absolute;
    left: 30px;
    bottom: 58px;
    border: 3px solid #fff;
  }
  .userName {
    font-size: 36px;
    position: absolute;
    left: 195px;
    bottom: 130px;
  }
  .userId {
    font-size: 26px;
    position: absolute;
    left: 195px;
    bottom: 80px;
  }
  .personalInfo {
    width: 170px;
    height: 56px;
    font-size: 26px;
    line-height: 55px;
    color: #fff;
    position: absolute;
    right: 0;
    bottom: 96px;
    background-color: #409eff;
    border-radius: 50px 0 0 50px;
  }
}
.mine-list {
  margin-top: 100px;
  .list-item {
    display: flex;
    align-items: center;
    background: #fff;
    padding-left: 16px;
    border-bottom: 1px solid #e5e8ee;
    .l_icon {
      flex-shrink: 0;
      font-size: 50px;
    }
    &:last-child {
      border-bottom: none;
    }
  }
  .van-button {
    width: 50%;
    margin: 20px auto;
    display: block;
    span {
      font-size: 16px;
    }
  }
}
</style>
